<template>
  <div>
    <a-modal
      centered
      title="申请主体选择"
      v-model="visible"
      @ok="onSubmit"
      @cancel="onCancel"
    >
      <a-form-model
        ref="form"
      >
        <a-form-model-item label="申请主体选择">
          <a-select
            show-search
            :value="sname"
            :filter-option="false"
            @change="handleChange"
            @search="handleSearch"
            style="width: 90%"
          >
            <a-select-option v-for="(item, index) in subjectOpts" :key="index" :value="item.subject">{{item.subject}}</a-select-option>
          </a-select>
          <a-icon :style="{ width: '10%', fontSize: '20px' }" type="plus-circle" @click="addApply" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <apply-modal v-if="addVisible" @cancel="onCancelAdd"></apply-modal>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import { getEditSubject, postEditSubject } from '@/api/business'
  import ApplyModal from './ApplyModal'

  export default {
    props: {
      sid: {
        type: String,
        default: ''
      }
    },
    name: 'UpdateSubject',
    components: { STable, ApplyModal },
    data () {
      return {
        queryParam: {},
        visible: true,
        addVisible: false,
        subjectOpts: {},
        sname: ''
      }
    },
    created () {
      getEditSubject(this.sid).then(res => {
        this.subjectOpts = res.result.data
      })
    },
    methods: {
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      handleChange (value) {
        this.sname = value
        const params = {}
        params['filter[subject]'] = value
        getEditSubject(this.sid, params).then(res => {
          this.subjectOpts = res.result.data
        })
      },
      handleSearch (value) {
        const params = {}
        params['filter[subject]'] = value
        getEditSubject(this.sid, params).then(res => {
          this.subjectOpts = res.result.data
        })
      },
      onSubmit () {
        const app = this
        const data = {}
        data['subject'] = app.sname
        postEditSubject(app.sid, data).then(res => {
          if (res.status === 0) {
            app.selectedRowKeys = []
            app.onCancel()
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onCancel () {
        this.visible = false
        this.$emit('cancel', this.visible)
      },
      addApply () {
        this.addVisible = true
      },
      onCancelAdd (visible) {
        this.addVisible = visible
      }
    }
  }
</script>

<style scoped>

</style>
